<template>
  <div class="layui-tab-item layui-show">
    <div class="layui-card">
      <div
        class="layui-form layui-card-header layuiadmin-card-header-auto"
        style="padding: 15px 15px 0px 15px"
      >
        <div class="layui-row">
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label">流程分类</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model.trim="model.username"
                  placeholder="请输入用户名"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label">流程名称</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model.trim="model.name"
                  placeholder="请输入流程名称"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label">流程标识</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model.trim="model.key"
                  placeholder="请输入流程标识"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label" style="padding: 0"
                ><button class="layui-btn" lay-filter="search">
                  <i
                    class="layui-icon layui-icon-search layuiadmin-button-btn"
                  ></i></button
              ></label>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-card-body">
        <div style="padding-bottom: 10px">
          <button
            class="layui-btn layui-btn-sm layui-btn-danger"
            layui-delete="deleteModel"
            field="id"
            table=" "
          >
            <i class="layui-icon">&#xe640;</i>
            删除所选流程
          </button>
        </div>
        <table id="dataTable"></table>
      </div>
    </div>
    <div id="proListBar" style="display: none">
      <a class="layui-btn layui-btn-xs" lay-event="relation">用户关联</a>
      <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="changeModel"
        >转化为模型</a
      >
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
        >删除</a
      >
    </div>
    <div id="relationBar" style="display: none">
      <a class="layui-btn layui-btn-xs" lay-event="interfaceInfo">接口调用</a>
    </div>
  </div>
</template>
<script>
export default {
  name: "ProcessList",
  data: function () {
    return {
      model: {},
      cols: [
        [
          {
            type: "checkbox",
            field: "id",
            align: "center",
          },
          {
            field: "category",
            title: "流程分类",
            align: "center",
          },
          {
            field: "key",
            title: "流程标识",
            align: "center",
          },
          {
            field: "name",
            title: "流程名称",
            align: "center",
          },
          {
            field: "version",
            title: "流程版本",
            align: "center",
            templet: function (res) {
              return "<div><b>V:" + res.version + "</b></div>";
            },
          },
          {
            field: "deploymentTime",
            title: "部署时间",
            align: "center",
            templet:
              "<div>{{layui.util.toDateString(d.deploymentTime, 'yyyy-MM-dd- HH:mm:ss')}}</div>",
          },
          {
            title: "流程XML",
            align: "center",
            width: 95,
            templet: function (res) {
              return "<span><a href='javascript:void(0)' lay-event='xmlExport'><i class='layui-icon layui-icon-fonts-html' style='font-size: 40px;color:#01AAED'></i></a></span>";
            },
          },
          {
            title: "流程图片",
            align: "center",
            width: 95,
            templet: function (res) {
              return "<span><a href='javascript:void(0)' lay-event='imageExport'><i class='layui-icon layui-icon-picture' style='font-size: 25px;color:#FF5722'></i></a></span>";
            },
          },
          {
            fixed: "right",
            title: "操作",
            align: "center",
            toolbar: "#proListBar",
          },
        ],
      ],
      nodeCols: [
        [
          {
            field: "taskName",
            title: "节点名称",
            align: "center",
          },
          {
            field: "taskType",
            title: "任务类型",
            align: "center",
          },
          {
            title: "人员类型",
            align: "center",
            templet: function (res) {
              switch (res.assigneeType) {
                case "1":
                  return "<div>受理人</div>";
                case "2":
                  return "<div>候选人</div>";
                case "3":
                  return "<div>候选组</div>";
                default:
                  return "<div></div>";
              }
            },
          },
          {
            fixed: "right",
            title: "操作",
            align: "center",
            templet: function (res) {
              if (res.taskType == "userTask" || res.taskType == "serviceTask") {
                return '<a class="layui-btn layui-btn-xs" lay-event="interfaceInfo">接口调用</a>';
              } else {
                return "<div></div>";
              }
            },
          },
        ],
      ],
      relationIndex: 0,
      relationData: {},
      relationEvent: {},
    };
  },
  mounted: function () {
    this.$nextTick(function () {
      this.initLayui();
      this.queryProcessList();
    });
  },
  methods: {
    queryProcessList: function (where) {
      if (this.checkIsNull(where)) {
        where = {};
      }
      var obj = {};
      obj.url = this.activitiProcess + "/processList";
      obj.cols = this.cols;
      obj.tableId = "dataTable";
      obj.where = where;
      this.renderTable(obj); //其中url tableId以及cols为必传其他参数个性化参数请参考layui数据表格
    },
    xmlExport: function (data, obj) {
      var that = this;
      this.post(
        this.activitiProcess + "/exportXml",
        {
          processDefId: data.id,
        },
        function (res) {
          if (res.code == "000000") {
            that.openContent({
              title: data.name + "流程XML",
              content: "<xmp>" + res.result + "</xmp>",
            });
          } else {
            that.showMsg(res.msg, false);
          }
        }
      );
    },
    imageExport: function (data, obj) {
      var that = this;
      this.post(
        this.activitiProcess + "/exportImage",
        {
          processDefId: data.id,
        },
        function (res) {
          if (res.code == "000000") {
            that.openContent({
              title: data.name + "流程XML",
              area: ["60%", "60%"],
              content:
                '<img src="data:image/jpeg;base64,' + res.result + '"></img>',
            });
          } else {
            that.showMsg(res.msg, false);
          }
        }
      );
    },
    changeModel: function (data, e) {
      var that = this;
      console.log(data);
      this.post(
        this.activitiProcess + "/toModel",
        {
          proDeId: data.id,
        },
        function (data) {
          if (data.code != "000000") {
            that.showMsg(data.msg, false);
          } else {
            that.openMsg(data.msg, true);
          }
        }
      );
    },
    relation: function (data, e) {
      var that = this;
      this.openContent(
        {
          title: "关联节点信息",
          content: '<table id="relationTable"></table>',
        },
        function (index) {
          that.relationIndex = index;
          that.relationData = data;
          that.relationEvent = e;
          var obj = {
            url: that.activitiProcess + "/nodeInfo",
            cols: that.nodeCols,
            tableId: "relationTable",
            where: {
              proDefId: data.id,
            },
          };
          that.renderTable(obj);
        }
      );
    },
    interfaceInfo: function (data, e) {
      var that = this;
      this.closeOpen(this.relationIndex);
      this.openPage({
        url:
          "/activiti/act/process/nodeEdit?id=" +
          data.id,
        title: "设置接口信息",
        end: function () {
          that.relation(that.relationData, that.relationEvent);
        },
      });
    },
  },
};
</script>